import { Card, Space, Button, Tooltip, RadioGroup, Radio } from '@douyinfe/semi-ui';
import { IconArrowUpLeft } from '@douyinfe/semi-icons';
import IntegralDetail from './integral-detail';
import { useNavigate, useParams } from 'react-router-dom';
import {  useStoreContext } from '../integral-context';
import { useEffect, useMemo, useState ,useRef} from 'react';
import IntegralStepNav from '../integral-step-nav';
import IntegralEdit from './integral-edit';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';
import { initialEntity } from '../integral-helper';

const IntegralEntityCard = ({ editable = false }) => {
  const navigate = useNavigate();


  const {
    state: { integral },
  } = useStoreContext();

  const { entity, entities, key } = integral;

  const formApi = useRef<FormApi<any>>();


  return (
    <Card
      bordered={false}
      title={
        <div className="flex justify-start relative">
          <Space>
            <Tooltip content="返回">
              <span>
                <Button icon={<IconArrowUpLeft />} type="tertiary" onClick={() => navigate(-1)} />
              </span>
            </Tooltip>
            <IntegralStepNav />
          </Space>
        </div>
      }
      headerExtraContent={null}
      footer={
        <div className="flex justify-center gap-x-2">
          {editable && (
            <>
              <Button
                theme="solid"
                size="large"
                className="w-1/6"
                onClick={() => {
                  console.log(formApi.current?.getValues());
                }}
              >
                保存
              </Button>
              <Button
                size="large"
                className="w-1/6"
                onClick={() => {
                  formApi.current?.reset();
                }}
              >
                重置
              </Button>
            </>
          )}
        </div>
      }
    >
      {editable ? <IntegralEdit entity={entity} formApiRef={formApi} /> : <IntegralDetail entity={entity} />}
    </Card>
  );
};

export default IntegralEntityCard;
